<template>
  <div>
    <div id="expressPrintUpdate">

    </div>
    <div style="font-size: 20px;font-weight: 600;color: #000;height: 80px;width: 100%;display: flex;align-items: center;justify-content: center;">
      低保业务
    </div>
    <div>
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </template>
    </div>
    <table border="1">
      <tr class="expressPrint_item" style="display: flex;min-height: 50px;">
        <td type="index" style="width: 150px;min-height: 50px;text-align: center;line-height: 50px;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="序号">
          序号
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;padding:7px;">
          姓名
        </td>
        <td style="width: 200px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;padding:7px;">
          行政区域
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="家庭住址">
          家庭住址
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="户口类别">
          户口类别
        </td>
        <td style="width: 200px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="身份证号">
          身份证号
        </td>
        <td style="width: 100px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="一卡通账号">
          一卡通账号
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="保障人口">
          保障人口
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="基础低保金">
          基础低保金
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="分类施保金">
          分类施保金
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="电价补贴">
          电价补贴
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="核定金额">
          核定金额
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="增调整情况">
          增调整情况
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="减调整情况">
          减调整情况
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="补助状态">
          补助状态
        </td>
      </tr>
      <tr class="expressPrint_item" v-for="(e,i) in list" :key="i" style="display: flex;min-height: 50px;">
        <td type="index" style="width: 150px;min-height: 50px;text-align: center;line-height: 50px;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="序号">
          {{i + 1}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;padding:7px;">
          {{e.approvalUserName}}
        </td>
        <td style="width: 200px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;padding:7px;">
          {{e.areaName}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="家庭住址">
          {{e.address}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="户口类别">
          {{e.householdType | mapLabel('householdType')}}
        </td>
        <td style="width: 200px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="身份证号">
          {{e.idCard}}
        </td>
        <td style="width: 100px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="一卡通账号">
          {{e.account}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="保障人口">
          {{e.livingAllowancesNumber}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="基础低保金">
          {{e.baseMoney}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="分类施保金">
          {{e.flsbMoney}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="电价补贴">
          {{e.electricitySubsidy}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="核定金额">
          {{e.approvedMoney}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="增调整情况">
          {{e.increase}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="减调整情况">
          {{e.reduce}}
        </td>
        <td style="width: 150px;min-height: 50px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;justify-content: center;"
          label="补助状态">
          {{e.status | mapLabel('approvalStatus')}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    props: {
      list: {},
    },
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: ['上海', '北京', '广州', '深圳'],
        isIndeterminate: true
      }
    },
    mounted() { },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

<style>
  #expressPrintUpdate {
    text-align: center;
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #000;
  }

  #expressPrintUpdate a {
    color: #409eff;
    margin-right: 5px;
    margin-left: 5px;
  }
</style>